/**
 * 学习目标：Redux 官方实现的 React 绑定库使用
 */

import { useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { addCount, minusCount } from './store/actionCreater'

export default function App() {
  const [show, setShow] = useState(true)
  return (
    <div>
      <h1>Redux基础案例</h1>
      <button onClick={() => setShow(!show)}>点击切换显示隐藏</button>
      {show ? <Son /> : null}
    </div>
  )
}

function Son() {
  const count = useSelector((state) => state.count)
  const dispatch = useDispatch()

  return (
    <div>
      <h2>子组件</h2>
      <h2>count:{count}</h2>
      <button onClick={() => dispatch(addCount(+1))}>+1</button>
      <button onClick={() => dispatch(minusCount(-1))}>-1</button>
      <hr />
      <button onClick={() => dispatch(addCount(10))}>+10</button>
      <button onClick={() => dispatch(addCount(100))}>+100</button>
      <button onClick={() => dispatch(addCount(1000))}>+1000</button>
    </div>
  )
}
